<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <div v-show="modalType === 'edit' || modalType === 'add'" class="form-style">
                <Form ref="formItem" label-position="right" :rules="ruleValidate" :model="formItem" :label-width="100">
                    <FormItem label="手机号：" prop="mobile">
                        <Input type="text" v-model="formItem.mobile" placeholder="请输入手机号" clearable></Input>
                    </FormItem>
                    <FormItem label="姓名：" prop="name">
                        <Input type="text" maxlength="50" v-model="formItem.name" placeholder="请输入姓名" clearable></Input>
                    </FormItem>
                    <FormItem label="性别：" prop="sex">
                        <RadioGroup v-model="formItem.sex">
                            <Radio label="0"><span>男</span></Radio>
                            <Radio label="1"><span>女</span></Radio>
                            <Radio label="2"><span>未知</span></Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="生日：" prop="birthday">
                        <DatePicker v-model="formItem.birthday" type="date" placeholder="请输入生日"></DatePicker>
                    </FormItem>
                    <FormItem label="地址：" prop="address">
                        <Input v-model="formItem.address" placeholder="请输入地址"
                               clearable></Input>
                    </FormItem>
                    <FormItem label="备注：">
                        <Input type="textarea" :autosize="{minRows: 2, maxRows: 5}" maxlength="255"
                               v-model="formItem.remarks" placeholder="请输入备注" clearable></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'edit' || modalType === 'add'">
                    <Button type="text" @click="cancelOption">取消</Button>
                    <Button type="success" @click="saveOption" :loading="btnLoading">保存</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>
<script>
import { memberInfoServiceInsert, memberInfoServiceUpdate } from '@/api/shop'

export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 500
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      ruleValidate: {
        mobile: [
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '生日不能为空', trigger: 'blur' }
        ]
      },
      formItem: {
        name: '',
        mobile: '',
        birthday: '',
        address: '',
        remarks: '',
        sex: ''
      },
      btnLoading: false
    }
  },
  methods: {
    cancelOption () {
      this.$emit('cancel')
    },
    addAction () {
      let param = {
        name: this.formItem.name,
        mobile: this.formItem.mobile,
        birthday: this.formItem.birthday,
        address: this.formItem.address,
        remarks: this.formItem.remarks,
        sex: this.formItem.sex,
        type: 1,
        source_from: 0
      }
      memberInfoServiceInsert(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveOption')
        } else {
          this.error(data)
          this.btnLoading = false
        }
      })
    },
    updateAction () {
      let param = {
        id: this.formItem.id,
        name: this.formItem.name,
        mobile: this.formItem.mobile,
        birthday: this.formItem.birthday,
        address: this.formItem.address,
        remarks: this.formItem.remarks,
        sex: this.formItem.sex,
        type: 1,
        source_from: 0
      }
      memberInfoServiceUpdate(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveOption')
        } else {
          this.error(data)
          this.btnLoading = false
        }
      })
    },
    saveOption () {
      this.btnLoading = true
      if (this.modalType === 'add') {
        this.addAction()
      } else if (this.modalType === 'edit') {
        this.updateAction()
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {
    dataObj (val) {
      console.log(val, '监听数据')
      this.formItem = val
    }
  }
}
</script>

<style scoped>
    .form-style {
        width: 90%;
    }
</style>
